<template>
  <div class="page-list-live">
    <PageList>
      <template #header>门禁闸机管理</template>
      <template #filter>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="门禁设备管理" name="accessControl">
            <ListFilter :form="topFilter" @search="handleSearch" @reset="handleReset"></ListFilter>
          </el-tab-pane>

          <el-tab-pane label="人脸识别设备管理" name="faceDetect">
            <ListFilter :form="faceFilter" :key-list="keyList" @search="handleSearch" @reset="handleReset"></ListFilter>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #tips>
        <el-button v-if="activeName === 'accessControl'" icon="el-icon-document-add" type="primary" @click="handleAdd">新建控制器</el-button>
        <el-button v-else type="primary" icon="el-icon-document-add" @click="faceAddhandle">新增设备</el-button>
      </template>
    </PageList>
    <component :is="activeName" ref="list"></component>
    <AccessControlDialog ref="AccessControlDialog" @success="afterEditSuccess"></AccessControlDialog>
    <FaceDetect ref="FaceDetect" @success="afterEditSuccess"></FaceDetect>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import ListFilter from '@/components/ListFilter'
  import FaceDetect from './component/FaceDetect'
  import AccessControlDialog from './component/AccessControlDialog.vue'

  export default {
    components: {
      ListFilter,
      FaceDetect,
      AccessControlDialog,
      accessControl: () => import('./AccessControl'),
      faceDetect: () => import('./FaceDetect')
    },
    mixins: [listMixin],
    data() {
      return {
        // tab选中的标签
        activeName: 'accessControl',
        topFilter: {
          name: { label: '控制器名称', placeholder: '请输入控制器名称' },
          serialNo: { label: '序列号', placeholder: '请输入序列号' }
        },
        faceFilter: {
          keyword: { label: '关键字', placeholder: '请输入设备名称、IP地址或端口' }
        },
        keyList: ['ip', 'port', 'name'],
      }
    },
    methods: {
      // 新增控制器
      handleAdd() {
        let objData = {
          // 进入哪一个程序
          status: 'add',
          apiKey: {
            add: '/AutoGate', // 添加
          }
        }
        this.$refs['AccessControlDialog'].openOne(objData)
        this.$refs['AccessControlDialog'].getTunnelData()
        this.$refs['AccessControlDialog'].getIcon()
        this.$refs['AccessControlDialog'].getEquipment()
      },
      // 新增人脸设备
      faceAddhandle() {
        let objData = {
          // 进入哪一个程序
          status: 'add',
          apiKey: {
            add: '/FaceDetectSetting', // 添加
          }
        }
        this.$refs['FaceDetect'].openOne(objData)
      },
      async afterEditSuccess() {
        this.$refs.list.getList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sc-list-filter-col {
    width: auto;
  }
  /deep/.el-tabs__header {
    margin: 0 0;
  }
</style>